<template>
  <div class="first">
    
    <hr size="5px" color="red">
     <table class="table">
        <tr>
          <td></td>
          <td></td>
          <td class="loginandregister" >

          <!--   用if来进行登录状态的判断 -->
            <div v-if="!logging_status()">
            <router-link to="/login">登录</router-link>|
            <router-link to="/register">注册</router-link>
            </div>
            <div v-else>
               欢迎用户: [{{user}}]-----<span @click="loginout">登出</span>
            </div>
            </td>
        </tr>
      </table>
      <hr size="4px" color="silver">

      <div class="title">
        <table>
          <tr>
            <td style="width:550px"><img :src=imgUrl alt="logo" class="img1" ></td>
            <td><el-input v-model="searchValue" placeholder="请输入内容" style="width:465px; height:32px;  margin:0px; padding:0px; line-height:30px;"></el-input> 
            <span class="search" @click="search(searchValue)">搜索</span></td>
            <td>
                <div class="nav">
                  <i class="el-icon-shopping-cart-2"></i>
                  <router-link to="/shoppingTrolley"> <span>我的购物车</span></router-link>
                </div>
            </td>
          </tr>
        </table>

      </div>
      <div class="line"></div>
            <el-menu
                  :default-active="activeIndex2"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                  background-color="red"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                   
                  >

                   <el-submenu index="1" style="margin-left: 200px ;">
                    <template slot="title">书籍分类</template>
                    <template v-for=" item in  catlogList" >
                    <el-menu-item index="1-1" @click="tobooks(item.id)">{{item.catelogName}}</el-menu-item>
                    </template>
                  </el-submenu>

                  
                  <el-menu-item index="2" style="margin-left: 100px ;"><router-link to="index">首页</router-link></el-menu-item>
                  
                

                 <el-menu-item index="3" style="margin-left: 100px ;" > <router-link to="/books">  全部书籍 </router-link> </el-menu-item>
                  
                  <el-menu-item index="4" style="margin-left:100px;"><a href="" target="_blank">排行</a></el-menu-item>
            </el-menu>
  <el-container>
    <el-header style=" width: 70%; height: 270px; margin-left:15%;  background-color: #ca151e; ">
        <table class="table2" >
          <tr>
            <td class="t1">
              <ul>
                <li class="xuanyi"> <a href="">
                  
                    <img src="../../assets/index/悬疑.png">
                  悬疑</a></li>
                <li class="xiandai">  <a href="">
                  <img src="../../assets/index/现代纸书.png">
                  现代</a></li>
                <li class="red"> <a href="">
                  <img src="../../assets/index/红色革命小图标.png">
                  红色革命</a></li>
                <li class="junshi"> <a href="">
                   <img src="../../assets/index/军事.png">
                  军事</a></li>
                <li class="lishi">  <a href="">
                   <img src="../../assets/index/历史.png">
                  历史</a></li>
                <li class="kehuan"> <a href="">
                   <img src="../../assets/index/科幻.png">
                  科幻</a>
                  </li>

              </ul>
            </td>
            <td > 
              <carousel></carousel>
            </td>
          </tr>
        </table>
        
    </el-header>
     
     
   
   
     <div class="content">



        <div class="content-left">
           <span> 本周推荐</span>
            <div class="content1">
            <table class="table3">
            <tr v-for="item in bookList" v-bind:key="item.id" >
              <td @click="tobooks(item.catlogId)">[{{item.catelogName}}]</td>
              <td @click="showShopping(item.id,item.catelogName)">{{item.productName}}</td>          
            </tr>
           
          </table>
          </div>
        </div>



        <div class="content-center">
          <span>学习推荐</span>
          <div class="content2">
             <img class="titleImage" src="../../assets/index/center.jpg" alt="">
            <table class="table3">
              <!-- 通过slice来控制v-for的次数 -->
            <tr v-for="item in bookList.slice(0, 4)" v-bind:key="item.id">
              <td style="width:40px;height: 20px;"><img :src="'http://localhost:8080/BMS/'+item.imageUrl" alt="无法加载"></td>
              <td @click="tobooks(item.catlogId)">[{{item.catelogName}}]</td>
              <td @click="showShopping(item.id,item.catelogName)">{{item.productName}}</td>          
            </tr>
          </table>
          <table class="table3">
              <!-- 通过slice来控制v-for的次数 -->
            <tr v-for="item in bookList.slice(0, 4)" v-bind:key="item.id" >
              <td style="width:40px;height: 20px;"><img :src="'http://localhost:8080/BMS/'+item.imageUrl" alt="无法加载"></td>
              <td @click="tobooks(item.catlogId)">[{{item.catelogName}}]</td>
              <td @click="showShopping(item.id,item.catelogName)">{{item.productName}}</td>          
            </tr>
          </table>
          <table class="table3">
              <!-- 通过slice来控制v-for的次数 -->
            <tr v-for="item in bookList.slice(0, 4)" v-bind:key="item.id">
              <td style="width:40px;height: 20px;"><img :src="'http://localhost:8080/BMS/'+item.imageUrl" alt="无法加载"></td>
              <td @click="tobooks(item.catlogId)">[{{item.catelogName}}]</td>
              <td @click="showShopping(item.id,item.catelogName)">{{item.productName}}</td>          
            </tr>
          </table>
          </div>
        </div>


        <div class="content-right">
           <span  > 图书畅销榜</span>
           <div class="content3">
            <table class="table3">
            <tr v-for="item in bookList" v-bind:key="item.id">
              <td @click="tobooks(item.catlogId)">[{{item.catelogName}}]</td>
              <td @click="showShopping(item.id,item.catelogName)">{{item.productName}}</td>          
            </tr>
           
          </table>
           </div>
        </div>
    </div>
    
    <div class="newContent">
           
           <div class="newContent-left">
             <span>新书推荐</span>
             <div class="newContent1">
               <table class="table4">
                 <tr>
                  <!--  在同一行 -->
                   <td @click="showShopping(item.id,item.catelogName)" v-for="item in bookList.slice(0,4)" v-bind:key="item.id">
                     <img :src="'http://localhost:8080/BMS/'+item.imageUrl" alt="无法加载" ></td>
                 </tr>
                 <tr>
                   <td @click="showShopping(item.id,item.catelogName)" v-for=" item in  bookList.slice(0,4)" v-bind:key="item.id"><p style="font-size:20px">{{item.productName}}</p>
                        <p style="font-size:15px">价格:{{item.price}}元/本</p>
                        <img style="width:65%; height:100%;  margin-top:10px;  " src="../../assets/images/buy.jpg" alt="">
                   </td>
                 </tr>
               </table>
           </div>
         </div>

         <div class="newContent-right">
          <span >新书畅销榜</span>
           <div class="newContent2">
           <table class="table4">
             <tr @click="showShopping(item.id,item.catelogName)" v-for="item in bookList.slice(0,1)" v-bind:key="item.id">
              <td style="height:80px; width: 49%;"><img style=" width: 80%; height:100px;position: relative; top:-45px; left:-25px " :src="'http://localhost:8080/BMS/'+item.imageUrl" alt="无法加载"></td>
               <td  style="width: 100px;height:100px;position: relative; top:-25px;">《{{item.productName}}》</td>
              
             </tr>
             <tr v-for="item in bookList.slice(1,6)" v-bind:key="item.id">
                <td @click="showShopping(item.id,item.catelogName,item.productName)">《{{item.productName}}》</td>
                 <td>价格:{{item.price}}</td>
             </tr>
           </table>
         </div>
         </div>

    </div>
  
    <!-- 尾部 -->
    <div class="footer">
      <img  src="../../assets/images/footert.jpg" alt="无法加载">
        <p>轩城商城官网 在线留言  联系我们  </p>
        <p>TANGXUAN ©2029 轩城图书有限公司 技术支持：小轩科技</p>
        <p>地址：中国·湖南·衡阳市xx路x1号湖南财经工业职业技术学院　电话：012651-1561　微信：123456978</p>
        <p>版权所有：轩城图书有限公司 湘ICP备061445864号</p>
        <p></p>
    </div>
    
    
    
    
     <el-main><router-view></router-view></el-main>
  </el-container>

  </div>
</template>

<script>
import carousel from './carousel.vue';
export default {
  components: { carousel },
  name:'index',
  
  data(){
    return{
        //搜索
        searchValue:'',


       imgUrl: require('../../assets/images/logo.jpg'),
       activeIndex: '2',
      activeIndex2: '1',
      //用于登录状态的判断
       user:'',
      bookList:[{
        id:'',
        catlogId:'',
        productName:'',
        price:'',
        spec:'',
        stockQty:'',
        refPrice:'',
        imageUrl:'',
        shelfStatu:'',
        catelogName:''

      }],
      catlogList:[{
        id:'',
        proId:'',
        catelogCode:'',
        catelogName:'',

      }]
    
    }
  },
   
   
    
    
  
  mounted(){
    this.getbookName();
    this.getcatlogData()
      this.logging_status();
  }
  ,methods:{
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      getbookName:function(){
        this.$axios.get("/user/getbook",).then(res=>{
            this.bookList=res.data
            console.log(this.bookList)
        })
      },
      //用于传输id到商品展示页面
      showShopping:function(id,catelogName,productName){
        console.log(id)
        this.$router.push({
          name:'shoppingShow',
          params:{id:id,catelogName:catelogName,productName:productName}
        })
      },
        logging_status:function(){
        if(localStorage.getItem("user")!=null){
         this.user=localStorage.getItem("user");
          return true
          
        }
        else{
          return false
        }
        
      },
      loginout:function(){
        localStorage.removeItem("user");
        localStorage.removeItem("userId");
         this.user=localStorage.getItem("user");
         
        alert("退出登录");
      },
      getcatlogData:function(){
        this.$axios.get("/catlog/getcatlogs").then(res=>{
              this.catlogList=res.data
              console.log(this.catlogList)
        })
      },
      tobooks:function(id){
        console.log(id)
        this.$router.push(
      {
        name:'books',
        params:{id:id}
      }
        )
      },
     //搜索
     search:function(searchValue){
       this.$router.push({
         name:'searchShow',
         params:{searchValue}
       })
     }
     
  },
      

			
	
}

</script>
/* scoped不加上路由转跳的时候样式会失效 */
<style scoped>



el-container{
 position: relative;
}
el-header{
  position: absolute;

 
}
el-aside{
  position: absolute;
}
el-main{
 position: absolute;
}
.table{
  width: 100%;
  height: 50px;
  color: #000;
  background-color: rgb(238, 231, 231);
  
}
.table2{
 
   width: 100%;
   height: 220px;
}
.table3{
  margin: 0 auto;
 
}

.table3 td{
 padding-top: 20px;
 padding-right: 5px;
 padding-left: 5px;
}

.table3  img{
  width: 100%;

}
.titleImage{
  width:75%;
  height: 200px;
margin-left:80px ;
}

.content2 table{
  float: left;
  width: 32.5%;
}

a{
  text-decoration: none;
}
.loginandregister{
  float: right;
  line-height: 50px;
  margin-right:10px ;
}
.img1{
  width: 80%;
  height: 150px;
  float: left;
}
.search{
  margin-left: -4.5px;
  display: inline-block;
  background-color: #ca151e;
   width: 50px;
   height: 38px;
   border-radius: 2px;
   line-height: 32px;
   position: relative;
   top: -2px;
}
.nav{
  width: 120px;
  height: 40px;
  margin-left: 120px ;
  line-height: 40px;
  background-color: red;
}

.t1{
  width: 30%;
}

.table2 .t1  ul li{
   display: block;
  width: 300px;
  border-bottom: 1px dashed black;
  
 
 
}
.content{
 margin: 10px auto;
  width: 70%;

 
}
.content span{
  font-size: 25px;
}
.content-left{
width: 20%;
text-align: left;
 float: left;
}
.content-center{
width: 60%;
text-align: left;
 float: left;
}
.content-right{
  text-align: left;
width: 20%;
 float: right;
}
.content1{
  width: 100%;
  height: 600px;
 border: 1px solid black;
}
.content2{
   width: 100%;
  height: 600px;
 border: 1px solid black;
}
.content3{
 width: 100%;
  height: 600px;
 border: 1px solid black;

}

.newContent{
  margin: 10px auto;
  width: 70%;
  
}
.newContent span{
  font-size:25px;
}

.table4 img{
  margin-left: 40px;
  margin-top: 50px;
  width: 70%;
  height:160px;
}

.table4 p{
    margin-left: 30%;
}

.newContent-left{
  width: 75%;
  float: left;
  text-align: left;
 

}
.newContent-right{
  width: 25%;
  float: right;
  text-align: right;
   
  
}
.newContent-right  .table4 td{
  text-align: left;

  
 
}

.newContent1{
  width: 100%;
  height: 400px;
   border: 1px solid black;
}
.newContent2{
  width: 100%;
   height: 400px;
  border: 1px solid black;

}

/* 点击购买的图片 */
.buy{
  width: 5px;
  height:5px;
}
.footer{
 
  width: 70%;
  height: 300px;
  
  margin: 10px auto;
}
.footer p{
  margin-top: 20px;
}
.footer img{
  width: 100%;
  
}
.xuanyi img {
  width: 10%;
  height: 10%;
  display: inline-block;
  position: relative;

 bottom:-9px;

}

.xuanyi a {
  font-size: 18px;
 color: rgb(228, 138, 21);
position: relative;
left: -5px;
}
.xiandai img{
  width: 5%;
  height: 5%;
   display: inline-block;
  position: relative;
  bottom: -3px;
  left: -4px;
}
.xiandai a{
  font-size: 18px;
 color: rgb(228, 138, 21);
 position: relative;
 right: -2px;
}
.red a{
 color: rgb(228, 138, 21);
 font-size: 18px;
margin: right;
position: relative;
right: -16px;;

}
.red img{
  width: 6%;
  height: 6%;
  display: inline-block;
  position: relative;
  bottom: -3px;
}
.junshi img{
   width: 6%;
  height:6%;
  display: inline-block;
  position: relative;
  bottom: -3px;
  left: -3px;
}
.junshi  a{
  font-size: 18px;
   color: rgb(228, 138, 21);
}
.lishi img{
     width: 6%;
  height:6%;
  display: inline-block;
  position: relative;
  bottom: -3px;
  left: -3px;
}
.lishi a{
    font-size: 18px;
   color: rgb(228, 138, 21);
}
.kehuan img{
  width: 7%;
  height:7%;
  display: inline-block;
  position: relative;
  bottom: -3px;
  left: -3px;
}
.kehuan a{
      font-size: 18px;
   color: rgb(228, 138, 21);
}
.font  {
   font-family: '微软雅黑';
   font-size: 12px;

}
.content-left span {
  font-family: '微软雅黑';
  font-size:20px ;
}
.content-center span{
  font-family: '微软雅黑';
  font-size:20px ;
}
.content-right span{
  font-family: '微软雅黑';
  font-size:20px ;
}
</style>